<template>
  <div class="footer-container">
    <van-tabbar v-model="active" active-color="#CEA62A"  route>
      <van-tabbar-item  v-for="(item, index) in list" :key="index" :to='item.path'>
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.defaultsrc : item.src" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

export default {
  data() {
    return {
      active: 0,
      icon: {
        active: "https://img01.yzcdn.cn/vant/user-active.png",
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",
      },
      list: [
        { title: "首页", src: require("./images/home.png"),defaultsrc:require("./images/defaulthome.png") ,path:'/home'},
        { title: "专题", src: require("./images/topic.png"),defaultsrc:require("./images/defaulttopic.png") ,path:'/topic'},
        { title: "分类", src: require("./images/category.png"),defaultsrc:require("./images/defaultcategory.png"),path:'/category' },
        { title: "购物车", src: require("./images/cart.png"),defaultsrc:require("./images/defaultcart.png") ,path:'/cart'},
        { title: "我的", src: require("./images/user.png"),defaultsrc:require("./images/defaultuser.png") ,path:'/user'},
      ],
    };
  },
};
</script>

<style>
</style>